
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

	  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.css" />
	  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/stylesheets/theme.css" />
	  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.css" />
	  <script src="${pageContext.request.contextPath}/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
	  <script src="${pageContext.request.contextPath}/static/lib/vue.js" type="text/javascript"></script>


	  <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>


<%--     <script src="lib/html5.js"></script>--%>

  </head>
<body>



<c:import url="top.jsp"></c:import>
<c:import url="left.jsp"></c:import>

	<div id="man">
    <div class="content">
		<div class="header">
			<h1 class="page-title">促销管理</h1>
		</div>
		
		<ul class="breadcrumb">
			<li><a href="adimg.jsp">促销管理</a> <span class="divider">/</span></li>
			<li class="active">首页轮播</li>
		</ul>
		
		<div class="container-fluid">
		
			<div class="row-fluid">

				<div class="block">
					<a href="#page-filter" class="block-heading" data-toggle="collapse">添加轮播图</a>
					<div id="page-filter" class="block-body collapse in">
						<div class="search-well">
							<form  class="form-inline" role="search"
								action="#" method="post" id="uploadForm">
								<input type="file" class="form-control" id="pic" name="ad_img" placeholder="请上传轮播图片" />

								
								<button class="btn btn-primary" type="button" id="btnSave" @click="saveShuffling">
									<i class="icon-save"></i> 保存
								</button>

							</form>
						</div>
					</div>
				</div>
			</div>
		
			<div class="row-fluid">
				
				<div class="block">
			        <p class="block-heading">轮播列表</p>
			        <div class="block-body gallery">

						<div style="display: inline-block" v-for="(shuffling,i) in shufflingArray" :key="i">

			        			<a href="javascript:" title="查看" target="_blank" >
			        				<img :src="'${pageContext.request.contextPath}/upload/' + shuffling.ad_pic"  width="470px" height="300px" class="img-polaroid">
								</a>
			        			<a href="javascript:" @click="deleteshuffling(shuffling.ad_id)"><img src="${pageContext.request.contextPath}/static/images/no.gif" /></a>

						</div>
<%--			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=22" title="查看" target="_blank">--%>
<%--			        				<img src="upload/left_ad02.png" width="450px" class="img-polaroid">--%>
<%--			        			</a>--%>
<%--			        			<a href="javascript:deleteClick(12)"><img src="static/images/no.gif" /></a>--%>
<%--			        		--%>
<%--			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=1" title="查看" target="_blank">--%>
<%--			        				<img src="upload/left_ad03.png" width="450px" class="img-polaroid">--%>
<%--			        			</a>--%>
<%--			        			<a href="javascript:deleteClick(14)"><img src="static/images/no.gif" /></a>--%>
<%--			        		--%>
<%--			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=2" title="查看" target="_blank">--%>
<%--			        				<img src="upload/left_ad04.png" width="450px" class="img-polaroid">--%>
<%--			        			</a>--%>
<%--			        			<a href="javascript:deleteClick(15)"><img src="static/images/no.gif" /></a>--%>
			        		
			        </div>
			    </div>
					
			</div>



			<%-- 引入尾部页面 --%>
			<c:import url="footer.jsp"></c:import>
		</div>
		</div>
	
		
	</div>

<script>



	var boy = new Vue({
		el:"#man",
		data:{
			shufflingArray:[],
			addshufflingArray:[]
		},
		methods:{
			//查询轮播页面数据，映射上
			selectshuffling(){
				$.post("${pageContext.request.contextPath }/shuffling/selectAdpic.do",function(man){
					if (man.code==200){
						boy.shufflingArray=man.data
						console.log(man.data)
					}
				})
			},
			//上传图片
			uploadpic(){
				var  shuffling_pic = $("#pic")[0].files[0];

				console.log(shuffling_pic)

				var formData = new FormData();
				formData.append("shuffling_pic",shuffling_pic)
				//console.log(formData)
				//alert("aaa")



				$.ajax({
					url: '${pageContext.request.contextPath}/shuffling/shufflingupload.do',
					type: 'POST',
					cache: false,
					data: formData,
					processData: false,
					contentType: false
				}).done(function(res) {
					console.log("======done=======")
					//上传成功后把照片存在addshufflingArray数组里面
					boy.shufflingArray.shuffling_pic=res.shuffling_pic
					//调用添加图书轮播图的方法
					boy.addshuffling();
					// console.log(res)
					// console.log(formData)
				}).fail(function(res) {
					console.log("======fail=======")
					console.log(res)
				});

			},
			//点击保存按钮时
			saveShuffling(){
				this.uploadpic()
				 alert("上传成功！！")
				//刷新页面
				window.location.reload();

			},
			//添加轮播图的图片
			addshuffling(){
				var data={

					ad_img:boy.shufflingArray.shuffling_pic
				}
				console.log(data)

				$.post("${pageContext.request.contextPath }/shuffling/addAd.do",data,function(man){


				})


			},
			//轮播图的删除
			deleteshuffling(even){

				$.post("${pageContext.request.contextPath }/shuffling/deleteshuffling.do",{"ad_id":even},function(man){


				})

				alert("删除成功！！！")
				//刷新页面
				window.location.reload();
			}

		},
		created(){
			this.selectshuffling()


		}
	})




</script>


<%--    --%>
<%--    <script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.js"></script>--%>
<%--	<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/tooltips.js"></script>--%>
<%--	<script type="text/javascript">--%>
<%--		// $("[rel=tooltip]").tooltip();--%>
<%--		// $(function() {--%>
<%--		// 	$('.demo-cancel-click').click(function() {--%>
<%--		// 		return false;--%>
<%--		// 	});--%>
<%--		//--%>
<%--		// 	$("#btnSave").click(function(){--%>
<%--		// 		var book_id=$("input[name='book_id']").val();--%>
<%--		// 		var ad_img=$("input[name='ad_img']").val();--%>
<%--		// 		if (book_id=='') {--%>
<%--		// 			show_err_msg("请输入书籍ID");--%>
<%--		// 		}else if (ad_img=='') {--%>
<%--		// 			show_err_msg("请上传轮播图片");--%>
<%--		// 		}else{--%>
<%--		//--%>
<%--		// 			show_loading();--%>
<%--		// 			uploadImg(book_id, ad_img);--%>
<%--		//--%>
<%--		// 		}--%>
<%--		//--%>
<%--		// 		return false;--%>
<%--		// 	});--%>
<%--		//--%>
<%--		// });--%>
<%--		//--%>
<%--		// function deleteClick(ad_id) {--%>
<%--		// 	if (confirm("你确定删除吗？")) {--%>
<%--		// 		show_loading();--%>
<%--		// 		var url="promotion/adimg/delete.action";--%>
<%--		// 		var data={--%>
<%--		// 				ad_id:ad_id--%>
<%--		// 		};--%>
<%--		//--%>
<%--		// 		$.post(url,data,function(response){--%>
<%--		// 			var jsonData=$.parseJSON(response);--%>
<%--		// 			var result=jsonData.status;--%>
<%--		//--%>
<%--		// 			var responseUrl="promotion/adimg.action";--%>
<%--		// 			if(result=="200"){--%>
<%--		// 				show_msg('操作成功',responseUrl);--%>
<%--		// 			}else{--%>
<%--		// 				show_err_msg('操作失败');--%>
<%--		// 			}--%>
<%--		//--%>
<%--		// 		});--%>
<%--		// 	}--%>
<%--		//--%>
<%--		// }--%>
<%--		//--%>
<%--		// function uploadImg(book_id,fileName){--%>
<%--		// 	var headFile = fileName.substr(fileName.indexOf("."));--%>
<%--		//     if(headFile=='.jpg' || headFile=='.jpeg' || headFile=='.png'){--%>
<%--		//     	//开始上传图片--%>
<%--		//     	show_loading();--%>
<%--		//     	var formData=new FormData();--%>
<%--		//     	formData.append("fileImg", $("input[name='ad_img']")[0].files[0]);--%>
<%--		//--%>
<%--		//     	$.ajax({--%>
<%--		//     	    url: 'upload.action',--%>
<%--		//     	    type: 'POST',--%>
<%--		//     	    cache: false,--%>
<%--		//     	    data: formData,--%>
<%--		//     	    processData: false,--%>
<%--		//     	    contentType: false--%>
<%--		//     	}).done(function(res) {--%>
<%--		//     		var jsonData=$.parseJSON(res);--%>
<%--		// 			if (jsonData.status==200) {--%>
<%--		// 				requestAddImg(book_id,jsonData.fileArray[0]);--%>
<%--		// 			}else{--%>
<%--		// 				show_err_msg('上传图片失败');--%>
<%--		// 			}--%>
<%--		//     	}).fail(function(res) {--%>
<%--		//     		show_err_msg('上传图片失败');--%>
<%--		//     	});--%>
<%--		//--%>
<%--		//     }else{--%>
<%--		//     	show_err_msg('不支持该图片类型，请上传jpg、jpeg、png格式的图片');--%>
<%--		//     }--%>
<%--		//--%>
<%--		// }--%>
<%--		//--%>
<%--		// function requestAddImg(book_id,ad_img){--%>
<%--		// 	//ajax请求servlet--%>
<%--		//     var url="promotion/adimg/add.action";--%>
<%--		// 	var data={--%>
<%--		// 			book_id:book_id,--%>
<%--		// 			ad_img:ad_img--%>
<%--		// 	};--%>
<%--		//--%>
<%--		// 	$.post(url,data,function(response){--%>
<%--		// 		var jsonData=$.parseJSON(response);--%>
<%--		// 		var result=jsonData.status;--%>
<%--		//--%>
<%--		// 		var responseUrl="promotion/adimg.action";--%>
<%--		// 		if(result=="200"){--%>
<%--		// 			show_msg('操作成功',responseUrl);--%>
<%--		// 		}else{--%>
<%--		// 			show_err_msg('操作失败');--%>
<%--		// 		}--%>
<%--		//--%>
<%--		// 	});--%>
<%--		// }--%>
<%--		--%>
<%--	</script>--%>

</body>
</html>